<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		姓名：<input type="text" id="stuname" name="stuname" />
		&nbsp;&nbsp;&nbsp; 班级：<select id="classid" name="classid"></select>
		&nbsp;&nbsp;&nbsp; <input type="button" id="insert" value="添加" /> <input
			type="button" id="seach" value="综合查询" /><br>
		<br>
		<table id="tab" width="60%" cellspacing="0" border="1">
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>性别</td>
				<td>年龄</td>
				<td>时间</td>
				<td>地址</td>
				<td>班级</td>
				<td>操作</td>
			</tr>
		</table>
	</center>
	<form id="studentForm" style="display: none;">
		<input type="hidden" id="stuno" name="stuno" /> 姓名：<input type="text"
			id="stuName" name="stuName" /><br> 性别：<input type="radio"
			name="sex" value="M" />男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
			type="radio" name="sex" value="F" />女<br> 年龄：<input type="text"
			id="age" name="age" /><br> 地址：<input type="text" id="city"
			name="city" /><br> 班级：<select id="classId" name="classId"></select><br>
		<input type="button" id="btn" value="提交" />
	</form>
</body>
</html>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
	
	function fillOption(){
		$.ajax({
			type:'post',
			url:'student/queryClass',
			dataType:'json',
			success:function(msg){
				$('#classId,#classid').append('<option value="0">请选择</option>');
				$.each(msg, function(){
					$('#classId,#classid').append('<option value="'
							+this.classId+'">'+this.className+'</option>');
				});
			}
		});
	}

	function fillTable(){
		$.ajax({
			type:'post',
			url:'student/queryAll',
			data:JSON.stringify({
				'stuName':$('#stuname').val(),
				'classId':$('#classid').val(),
			}),
			contentType:'application/json; charset=utf-8',
			dataType:'json',
			success:function(msg){
				$.each(msg, function(){
					var sexs = this.sex == 'F'?'女':'男';
					var upd = '<a href="javascript:;" class="updateStudent" id="'
						+this.stuno+'">修改</a>';
					var del = '<a href="javascript:;" class="deleteStudent" id="'
						+this.stuno+'">删除</a>';
					$('#tab').append('<tr><td>'+this.stuno+'</td><td>'+this.stuName
							+'</td><td>'+sexs+'</td><td>'+this.age
							+'</td><td>'+this.inDate+'</td><td>'+this.city
							+'</td><td>'+this.className+'</td><td>'+upd
							+'&nbsp;&nbsp;&nbsp;'+del+'</td></tr>');
				});
			}
		});
	}

	$(function(){
		var method;
		
		fillOption();//填充下拉框
		fillTable();//填充表格
		
		//点击删除
		$(document).on('click', '.deleteStudent', function(){
			if (window.confirm("确定删除吗？")) {
				$.ajax({
					type:'post',
					url:'student/deleteStudent/'+this.id,
					dataType:'json',
					success:function(msg){
						if (msg.state) {
							$('#tab tr:gt(0)').remove();
							fillTable();//填充表格
						}else {
							alert("删除失败，请重试.")
						}
					}
				});
			}
		});
		
		//点击提交
		$('#btn').on('click', function(){
			$.ajax({
				type:'post',
				url:'student/'+method,
				data:JSON.stringify({
					'stuno':$('#stuno').val(),
					'stuName':$('#stuName').val(),
					'sex':$(':radio[name="sex"]:checked').val(),
					'age':$('#age').val(),
					'city':$('#city').val(),
					'classId':$('#classId').val(),
				}),
				contentType:'application/json; charset=utf-8',
				dataType:'json',
				success:function(msg){
					if (msg.state) {
						var sex = $(':checked').val();
						$('#tab tr:gt(0)').remove();
						fillTable();//填充表格
						$('#studentForm').hide();
						$('#tab').show();
						$('#stuno').val(null);
						$('#stuName').val(null);
						$(':radio[value="'+sex+'"]').attr('checked',false);
						$('#age').val(null);
						$('#city').val(null);
						$('#classId').val(null);
					} else {
						alert("更新失败，请重试.")
					}
				}
			});
		});
		
		//点击修改
		$(document).on('click', '.updateStudent', function(){
			method = 'updateStudent';
			$.ajax({
				type:'post',
				url:'student/queryById/'+this.id,
				dataType:'json',
				success:function(stu){
					$('#studentForm').show();
					$('#tab').hide();
					$('#stuno').val(stu.stuno);
					$('#stuName').val(stu.stuName);
					$(':radio[value="'+stu.sex+'"]').attr('checked',true);
					$('#age').val(stu.age);
					$('#city').val(stu.city);
					$('#classId').val(stu.classId);
				}
			});
		});
		//点击添加
		$('#insert').on('click', function(){
			method = 'insertStudent';
			$('#studentForm').show();
			$('#tab').hide();
		});
		
		//点击添加
		$('#seach').on('click', function(){
			$('#tab tr:gt(0)').remove();
			fillTable();
		});
	});
	
</script>